<template>
    <div  @click="showAdditem=false">
        <w-header :showAdditem="showAdditem" v-on:listenShowAdditem="change" :title="title"></w-header>
        <div class="add1"></div>
        <div>
            <mt-tab-container v-model="tab">
                <mt-tab-container-item id="wei">
                    <mesg-list></mesg-list>
                </mt-tab-container-item>
                <mt-tab-container-item id="tel"></mt-tab-container-item>
                <mt-tab-container-item id="find"></mt-tab-container-item>
                <mt-tab-container-item id="my"></mt-tab-container-item>
            </mt-tab-container>
        </div>
        <div class="add2"></div>
        <w-foot v-on:listenId="upTab"></w-foot>
    </div>
</template>

<script>
import mesgList from "./common/MesgList.vue"
import wHeader from "./common/Head.vue"
import wFoot from "./common/Foot.vue"
export default {
    components:{wHeader,wFoot,mesgList},
    data(){
        return {
            showAdditem:false,
            title:"微信",
            tab:"wei",
        }
    },
    methods:{
        change(show){
            this.showAdditem = !show;
        },
        upTab(newTab){
            this.tab = newTab;
        }
    },
    watch:{
        tab(){
            if(this.tab == "wei"){
                this.title = "微信";
            }else if(this.tab == "tel"){
                this.title = "通讯录";
            }else if(this.tab == "find"){
                this.title = "发现";
            }else{
                this.title = "我的";
            }
        }
    }
}
</script>
<style>
    .add1{
        height: 42px;
    }
    .add2{
        height: 42px;
    }
</style>